<template>
    <div class="business">
        <div v-show="showPage == 1" class="page-one page">
            <div class="title">
                <span class="text">让靠谱的人和需求来找您,请如实填写!</span>
                <a @click="showExample" class="check-example">查看范例</a>
            </div>
            <div class="project">
                <div class="option">
                    <div class="thumb">
                        <span class="option-name">
                            <span class="certainly-write-flag">*</span>
                            称呼：
                        </span>
                    </div>
                    <div class="content-box">
                        <van-radio-group v-model="sex" direction="horizontal">
                            <van-radio name="man" icon-size="14px">男士</van-radio>
                            <van-radio name="women" icon-size="14px">女士</van-radio>
                        </van-radio-group>
                    </div>
                </div>
                <div class="wechat">
                    <div class="user-wechat-info-text option">
                        <div class="thumb">
                            <span class="option-name">
                                <span class="certainly-write-flag">*</span>
                                微信号：
                            </span>
                        </div>
                        <div class="content-box">
                            <input id="wechat-input" type="text" v-model="data.userWx" placeholder="微信号或微信绑定手机,不是微信昵称" >
                        </div>
                    </div>
                    <div v-show="data.userWx" id="up-load-wechat-qr-code">
                        <a @click="clickUpLoadImg" id="choose-img">
                            <span id="not-img-show" v-show="!data.wxScan">
                                <div class="choose-img-icon">+</div>
                                <div class="choose-img-explain">二维码</div>
                            </span>
                            <img 
                            id="user-wechat-img" 
                            :src="data.wxScan"  
                            v-show="data.wxScan">
                            <van-icon @click.stop="deleteUserImg" id="delete-wechat-btn" name="clear" />
                        </a>
                        <span id="choose-img-empty-explain">非必,建议上传</span>
                    </div>
                </div>
                <div class="option">
                    <div class="thumb">
                        <span class="option-name">
                            <span class="certainly-write-flag">*</span>
                            所在位置：
                        </span>
                    </div>
                    <div @click="clickArea" class="content-box">
                        <div class="content" :class="area.name ? 'active' : ''">
                            {{area.name || area.defaultText}}
                        </div>
                        <div class="thumb">
                            <van-icon class="icon" name="arrow" />
                        </div>
                    </div>
                </div>
                <!-- 备注 -->
                <write-opt 
                :name="wirteOpt.description.name"
                :defaultText="wirteOpt.description.defaultText"
                :text="wirteOpt.description.text"
                :content="wirteOpt.description.content"
                :showImg="wirteOpt.description.showImg"
                :minlength="wirteOpt.description.minlength"
                :maxlength="wirteOpt.description.maxlength"
                :upImg="wirteOpt.description.upImg"
                :id="wirteOpt.description.id"
                @sureSave="sureSave"
                />
                <!-- 我的供应 -->
                <write-opt 
                :name="wirteOpt.supply.name"
                :defaultText="wirteOpt.supply.defaultText"
                :text="wirteOpt.supply.text"
                :content="wirteOpt.supply.content"
                :showImg="wirteOpt.supply.showImg"
                :minlength="wirteOpt.supply.minlength"
                :maxlength="wirteOpt.supply.maxlength"
                :upImg="wirteOpt.supply.upImg"
                :id="wirteOpt.supply.id"
                :imgMaxLangth="wirteOpt.supply.imgMaxLangth"
                @sureSave="sureSave"
                >
                    <template v-slot:window-top>
                        <product-choose-line 
                        :id="'supply'" 
                        :selectedListData="selectedList.supply"
                        :optName="'产品类别'"
                        @multiProductChose="multiProductChose" 
                        />
                    </template>
                </write-opt>
                <!-- 我的需求 -->
                <write-opt 
                :name="wirteOpt.demand.name"
                :defaultText="wirteOpt.demand.defaultText"
                :text="wirteOpt.demand.text"
                :content="wirteOpt.demand.content"
                :minlength="wirteOpt.demand.minlength"
                :maxlength="wirteOpt.demand.maxlength"
                :upImg="wirteOpt.demand.upImg"
                :id="wirteOpt.demand.id"
                :imgMaxLangth="wirteOpt.demand.imgMaxLangth"
                @sureSave="sureSave"
                >
                    <template v-slot:window-top>
                        <product-choose-line 
                        :id="'demand'" 
                        :selectedListData="selectedList.demand"
                        :optName="'需求类别'"
                        @multiProductChose="multiProductChose"
                        />
                    </template>
                </write-opt>
            </div>
            <div class="user-business-botton-menu-assist"></div>
            <div class="user-business-botton-menu">
                <a @click="savePageOne" id="next-business" class="user-business-botton">提交</a>
            </div>
        </div>
        <div v-show="showPage == 2" class="page-two page">
            <div class="title">以下项目均为非必填！建议适当填写</div>

        </div>
        
        <!-- 图片上传 -->
        <img-up-load ref="imgUpLoad" @imgUpLoadSuccess="imgUpLoadSuccess" />

        <!-- 区域选择 -->
        <area-choose 
        class="area-choose-div"
        ref="areaChoose"
        @sureArea="sureArea"
        >
            <template v-slot:top>
                <div class="title">建议完整选择省市区镇，以便精准匹配互助资源！</div>
            </template>
        </area-choose>

        <!-- 范例图片 -->
        <user-card-example ref="userCardExample" />

        <!-- 保存失败弹窗 -->
        <submit-fail :message="submitFail.message" ref="submitFail" />
    </div>
</template>

<script>
// UI组件
import { RadioGroup, Radio, Icon, Dialog } from 'vant'

// 自定义组件
import ImgUpLoad from '_components/project/common/ImgUpLoad'
import WriteOpt from '_components/project/common/WriteOpt'
import AreaChoose from '_components/project/common/AreaChoose'
import ProductChooseLine from '_components/project/common/ProductChooseLine'
import UserCardExample from '_components/project/ShowWindow/UserCardExample'
import SubmitFail from '_components/project/ShowWindow/SubmitFail'

// 自定义方法
import { getText } from '_commonFn/string'
import { getCookie } from "_commonFn/cookie"
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"
import { regzh } from "_commonFn/regExp"
import { saveUserBusiness } from '_network/request'

import Vue from 'vue'

Vue.use(Radio).use(RadioGroup).use(Icon)

export default {
    name: 'Business',
    props: {
        businessData: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            submitFail: {
                message: '保存失败！请再尝试1次或者联络在线客服',
            },
            showPage: 1,
            sex: 'man',
            data: {
                sex: null, // int	性别:1:男,2:女
                userWx: null, // string	我的微信
                wxScan: null, // string	微信二维码请求地址
                description: null, // string	微信备注
                areaCode: null, // string	所在地区编号
                areaName: null, // string	所在地区
                supply: null, // string	我的供应
                supplyGoods: null, // string	供应产品编号,以,号相隔
                supplyGoodsName: null, // string	供应产品名称,以,号相隔
                demand: null, // string	我的需求
                demandGoods: null, // string	需求产品编号,以,号相隔
                demandGoodsName: null, // string	需求产品名称,以,号相隔
                findWho: null, // string	我要找谁
                myHelp: null, // string	我能帮助
                yourSelf: null, // string	介始自己
                comCode: null, // string	所在企业编号
                company: null, // string	所在企业
                cardA: null, // string	名片正面URL地址
                cardB: null, // string	名片反面URL地址
                isPartner: null, // int	是否选择了我要找业务互助合作伙伴
                isDanger: false,
            },
            wirteOpt: {
                description: { // 备注
                    defaultText: '非必填',
                    minlength: 0,
                    maxlength: 50,
                    upImg: false,
                    text: null,
                    name: '备注',
                    id: 'description',
                },
                supply: {
                    defaultText: '请具体说明能提供哪些产品和服务！10-1000字,可上传不超过2张图片',
                    minlength: 10,
                    maxlength: 1000,
                    upImg: true,
                    text: null,
                    imgLength: 2,
                    name: '我的供应',
                    content: null,
                    id: 'supply',
                    imgMaxLangth: 2,
                },
                demand: {
                    defaultText: '请具体说明需要哪些资源和帮助(产品/服务/信息/人脉等)！10-1000字,可上传不超过2张图片,非必填',
                    minlength: 10,
                    maxlength: 1000,
                    upImg: true,
                    text: null,
                    imgLength: 2,
                    name: '我的需求',
                    content: null,
                    id: 'demand',
                    imgMaxLangth: 2,
                },
                yourSelf: {
                    defaultText: '请具体说明能提供哪些产品和服务！10-1000字,可上传不超过2张图片',
                    minlength: 10,
                    maxlength: 1000,
                    upImg: true,
                    text: null,
                    name: '自我介绍',
                    content: null,
                    id: 'yourSelf',
                    imgMaxLangth: 2,
                },
                findWho: {
                    defaultText: '请具体说明要找哪种类型的业务互助合作伙伴！10-1000字以内,可上传不超过2张图片,必填',
                    minlength: 10,
                    maxlength: 1000,
                    upImg: true,
                    text: null,
                    name: '我要找谁',
                    content: null,
                    id: 'findWho',
                    imgMaxLangth: 2,
                },
                myHelp: {
                    defaultText: '请具体说明能为业务互助伙伴提供哪些资源或帮助！10-1000字以内,可上传不超过2张图片,必填',
                    minlength: 10,
                    maxlength: 1000,
                    upImg: true,
                    text: null,
                    name: '我能帮助',
                    content: null,
                    id: 'myHelp',
                    imgMaxLangth: 2,
                },
            },
            selectedList: { // 可以选择的数据列表
                supply: [], // 供应
                demand: [], // 需求
                yourSelf: [],
                findWho: [],
                myHelp: [],
            },
            area: {
                name: null,
                code: null,
                defaultText: '非必填'
            },
        }
    },
    methods: {
        multiProductChose({id, list}) {
            if (id in this.selectedList && Array.isArray(list)) {
                this.selectedList[id] = list
            }
        },
        showExample() {
            this.$refs.userCardExample.showWindow()
        },
        // 点击选择区域
        clickArea() {
            this.$refs.areaChoose.show()
        },
        // 最终选择区域
        sureArea({code, name}) {
            this.area.code = code
            this.area.name = name
        },
        // 初始化数据
        initData() {
            const sex = getCookie('Sex')
            this.sex = sex == 1 ? 'man' 
            :sex == 0 ? 'women'
            : ''
            const data = this.data
            console.log('data', data)
            // 编辑项
            this.wirteOpt.description.text = getText(data.description)
            this.wirteOpt.supply.text = getText(data.supply)
            this.wirteOpt.demand.text = getText(data.demand)
            this.wirteOpt.findWho.text = getText(data.findWho)
            this.wirteOpt.myHelp.text = getText(data.myHelp)
            this.wirteOpt.yourSelf.text = getText(data.yourSelf)
            this.wirteOpt.supply.content = data.supply || ''
            this.wirteOpt.demand.content = data.demand || ''
            this.wirteOpt.findWho.content = data.findWho || ''
            this.wirteOpt.myHelp.content = data.myHelp || ''
            this.wirteOpt.yourSelf.content = data.yourSelf || ''
            // 位置
            this.area.name = data.areaName
            this.area.code = data.areaCode
            // 选择项
            this.setSelectedList(data)
        },
        // 设置已选择的选项
        setSelectedList(data) {
            // console.log('data.supplyGoods', data.supplyGoods)
            // 供应类型选项
            if (data.supplyGoods) {
                this.saveSelectedList({
                    codeArr: data.supplyGoods.split(','),
                    nameArr: data.supplyGoodsName.split(','),
                    key: 'supply'
                })
            }
            
            // 需求类型选项
            if (data.demandGoods) {
                this.saveSelectedList({
                    codeArr: data.demandGoods.split(','),
                    nameArr: data.demandGoodsName.split(','),
                    key: 'demand'
                })
            }
        },
        // 保存已选择的选项
        saveSelectedList({
            codeArr,
            nameArr,
            key,
        }) {
            const arr = []
            codeArr.forEach((item, index) => {
                arr.push({
                    name: nameArr[index] || '',
                    code: item
                })
            })
            this.selectedList[key] = arr
        },
        deleteUserImg() {
            this.data.wxScan = ''
        },
        // 点击上传图片
        clickUpLoadImg() {
            if (this.data.wxScan == '') {
                this.$refs.imgUpLoad.choose('wx')
            }
        },
        // 图片上传成功
        imgUpLoadSuccess(url, type) {
            // console.log('type', type)
            this.data.wxScan = url || ''
        },
        // 点击弹窗确定按钮
        sureSave({id, str}) {
            // console.log('id', id)
            // console.log('str', str)
            if (id) {
                this.wirteOpt[id].content = str
                this.wirteOpt[id].text = getText(str)
            }
        },
        // 获取数据对象内容，以,分割
        getArrObjContent(arr, key = 'code') {
            const contentArr = []
            arr.forEach((item, index) => {
                if (arr[index][key]) {
                    contentArr.push(arr[index][key])
                }
            })
            return contentArr.join(',')
        },
        checkPageOne() {
            if (this.sex === '') {
                failTextVantToa("请选择性别")
                return false
            } else if (this.data.userWx == '') {
                failTextVantToa('微信号不能为空')
                return false
            }  else if (regzh.test(this.data.userWx) === true) {
                failTextVantToa('微信号中不能有中文,请确认是否误录微信昵称')
                return false
            } else if (this.area.code == '' || this.area.code == undefined || this.area.code == null) {
                failTextVantToa('请选择位置')
                return false
            } else if (!this.wirteOpt.supply.content || this.wirteOpt.supply.content.length < 10) {
                failTextVantToa('我的供应至少10-1000字')
                return false
            } else if (!this.wirteOpt.supply.content || this.wirteOpt.supply.content.length > 1000) {
                failTextVantToa('我的供应最多1000字')
                return false
            }
            return true
        },
        // 获取上传服务器第一页数据
        getRequestOnePageData() {
            // console.log('this.data:', this.data)
            // console.log('性别:', this.sex)
            // console.log('微信号:', this.data.userWx)
            // console.log('微信图片:', this.data.wxScan)
            // console.log('地区:', this.area)
            // console.log('备注内容:', this.wirteOpt.description.text)
            // console.log('供应内容:', this.wirteOpt.supply.content)
            // console.log('供应产品:', this.selectedList.supply)
            // console.log('需求内容:', this.wirteOpt.demand.content)
            // console.log('需求产品:', this.selectedList.demand)
            const data = {
                Sex: this.data.userWx === 'man' ? '1' : '2',
                UserWx: this.data.userWx,
                WxScan: this.data.wxScan,
                Description: this.wirteOpt.description.text,
                Area: this.area.code,
                Supply: this.wirteOpt.supply.content,
                Demand: this.wirteOpt.demand.content,
                SupplyGoods: this.getArrObjContent(this.selectedList.supply),
                DemandGoods: this.getArrObjContent(this.selectedList.demand),
            }
            return data
        },
        // 保存第一页数据
        savePageOne() {
            if (this.checkPageOne()) {
                // const requestData = this.getRequestOnePageData()
                this.saveUserBusiness(this.getRequestOnePageData())
            }
        },
        // 执行首次保存我的业务名片
        saveUserBusiness(requestData) {
            saveUserBusiness(requestData, (isSuccess) => {
                if (isSuccess) {
                    this.savePageOneSuccess()
                } else {
                    this.savePageOneFail()
                }
            })
        },
        // 首次保存我的业务名片成功后显示
        savePageOneSuccess() {
            const that = this
            Dialog({
                message: `您已设置基础资料，可参加活动！\n再花1分钟完整设置，会带来更大帮助！`,
                width: 290,
                confirmButtonText: '知道了',
                closeOnClickOverlay: true,
                beforeClose(action, done) {
                    // console.log('that.showPage', that.showPage)
                    that.showPage = 2
                    done()
                }
            })
        },
        // 首次保存我的业务名片失败后显示
        savePageOneFail() {
            this.$refs.submitFail.showWindow()
        },
    },
    watch: {
        businessData: {
            immediate: true,
            deep: true,
            handler(val) {
                this.data = {...val}
                this.initData()
            }
        }
    },
    activated() {
        // console.log('this.businessData', this.businessData)
        this.data = this.businessData
    },
    components: {
        ImgUpLoad,
        WriteOpt,
        AreaChoose,
        ProductChooseLine,
        UserCardExample,
        SubmitFail,
    },
}
</script>

<style lang="scss" scoped>
.business {
    height: 100%;
    background: #efefef;

    .page-one {
        .title {
            line-height: 35px;
            background: #efefef;
            overflow: hidden;
            font-size: 12px;
            margin-bottom: 0px;
            display: flex;
            justify-content: space-between;
            padding: 0 15px;
            color: red;

            .text {
                color: red;
            }
        }

        .project {
            background: white;

            .option {
                display: flex;
                height: 50px;
                align-items: center;
                padding: 0 15px;
                border-bottom: 1px solid #efefef;

                .thumb {
                    flex-shrink: 0;
                    font-weight: bold;

                    .option-name {
                        flex-shrink: 0;

                        .certainly-write-flag {
                            color: red;
                            display: inline-block;
                            width: 10px;
                        }
                    }
                }

                .content-box {
                    height: 100%;
                    width: 100%;
                    display: flex;
                    align-items: center;

                    .content {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        box-orient: vertical;
                        -webkit-line-clamp: 1;
                        line-clamp: 1;
                        overflow: hidden;
                        width: 100%;
                        color: #999999;
                        height: 22px;
                    }

                    .active {
                        color: #333333;
                    }

                    .thumb {
                        flex-shrink: 0;

                        .icon {
                            font-weight: bold;
                        }
                    }
                }
            }

            .wechat {
                padding: 0 15px;
                border-bottom: 1px solid #efefef;

                .user-wechat-info-text {
                    border: 0;
                    padding: 0;
                }

                #wechat-input {
                    width: 100%;
                    height: 100%;
                    border: none;
                    outline: none;
                }

                #up-load-wechat-qr-code {
                    padding-bottom: 10px;
                    display: flex;
                    display: -webkit-flex;
                    align-items: flex-end;

                    #choose-img {
                        width: 80px;
                        height: 80px;
                        display: -webkit-flex;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        border-radius: 3px;
                        color: #999999;
                        border: 2px solid #eeeeee;
                        position: relative;

                        #not-img-show {
                            width: 100%;
                            height: 100%;
                            display: -webkit-flex;
                            display: -moz-flex;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            border-radius: 3px;

                            .choose-img-icon {
                                display: -webkit-flex;
                                display: -moz-flex;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 46px;
                                font-weight: 100;
                                height: 28px;
                                width: 28px;
                                margin-bottom: 5px;
                            }

                            .choose-img-explain {
                                font-size: 12px;
                                text-align: center;
                            }
                        }

                        #user-wechat-img {
                            width: 100%;
                            height: 100%;
                        }

                        #delete-wechat-btn {
                            color: #cdcdcd;
                            position: absolute;
                            right: -4px;
                            top: -4px;
                        }
                    }

                    #choose-img-empty-explain {
                        color: #999999;
                        margin-left: 5px;
                    }
                }
            }
        }

        .user-business-botton-menu-assist {
            height: 55px;
            width: 100%;
            background: #efefef;
        }

        .user-business-botton-menu {
            height: 55px;
            width: 100%;
            background: white;
            padding: 3px;
            display: flex;
            position: fixed;
            bottom: 0;
            box-shadow: 0 1px 2px 1px rgba(187, 187, 187, 0.4);
            margin-bottom: 0 !important;

            #next-business {
                display: flex;
                width: 100%;
                height: 100%;
                background: #0077bf;
                color: white;
                font-size: 20px;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .area-choose-div {
        .title {
            padding: 0 15px;
            height: 35px;
            color: #999999;
            width: 100%;
            flex-shrink: 0;
            border-bottom: 1px solid #E5E5E5;
            line-height: 35px;
        }
    }
}
</style>